/**
 * refactoring by chenxingjian on 2019/4/12.
 * 用户信息（右上角）
 */
import React from 'react';
import {connect} from 'react-redux';
import {messages, removeToken} from 'share/common';
import menuRoute from 'routes/menuRoute';
import NullDataImg from "images/dashboard/null-data.png";
import 'styles/main/components/common-function.scss';
import SVGIcon from "components/SVGIcon";

class CommonFunc extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      commonFunc: JSON.parse(localStorage.getItem("hly.commonFunction")) || {
        TENANT_MODE: {
          PERSONAL_MODE: [],
          ADMIN_MODE: []
        },
        COMPANY_MODE: {
          PERSONAL_MODE: [],
          ADMIN_MODE: []
        }
      },
      className: 'common-func-list hide'
    }
  }

  showList = () => {
    if(window.ISIE9) {
      this.setState({className: 'common-func-list show'});
    } else {
      this.setState({className: 'common-func-list slide-down-enter slide-down-enter-active'});
    }
  };

  hideList = () => {
    if(window.ISIE9){
      this.setState({ className: 'common-func-list hide' });
    } else {
      this.setState({ className: 'common-func-list  slide-up-leave slide-up-leave-active' });
      setTimeout(()=>{
        this.setState({ className: 'common-func-list hide' });
      }, 201)
    }
  };

  goToPages = (key) => {
    let url = menuRoute.getMenuItemByAttr(key, 'key').url;
    if (key === "personal-settings")
      url += "?tab=2";
    this.props.menuRouterDeal(url);
  };

  render() {
    const { commonFunc, className } = this.state;
    const { tenantMode, user } = this.props;
    let tenantmode = tenantMode ? "TENANT_MODE" : "COMPANY_MODE";
    let totalLength = commonFunc[tenantmode].PERSONAL_MODE.length + commonFunc[tenantmode].ADMIN_MODE.length;
    let hasCommonFunc = () => {
      let tenantmode = ['TENANT_MODE', 'COMPANY_MODE'];
      let totalLength = 0;
      tenantmode.forEach(mode => totalLength += (commonFunc[mode].PERSONAL_MODE.length + commonFunc[mode].ADMIN_MODE.length));
      return totalLength;
    };
    let commonFuncMenuShow = !user.enableNewPermission || (user.enableNewPermission && hasCommonFunc());
    return commonFuncMenuShow ? (
      <div className="common-func-box"
           onMouseOver={this.showList}
           onMouseLeave={this.hideList}
      >
        <span className="common-func-button">
          <SVGIcon type="appstore"/>
        </span>
        <span className="title">{messages('dashboard.key135')/*常用*/}</span>
        <div className={className}>
          {totalLength
            ? (
              <div className="common-tag-list">
                <div className={"tag-list"}>
                  <h3>{messages('dashboard.key118')/*个人模式*/}</h3>
                  {commonFunc[tenantmode].PERSONAL_MODE.map((item) => {
                    return (
                      <span key={item} className="tag-item"
                            onClick={() => this.goToPages(item)}>{messages(`menu.${item}`)}</span>)
                  })}
                </div>
                {this.hasAnyAuthorities(['ROLE_TENANT_ADMIN', 'ROLE_COMPANY_ADMIN']) && (<div className={"tag-list"}>
                  <h3>{messages('dashboard.key101')/*管理员模式*/}</h3>
                  {commonFunc[tenantmode].ADMIN_MODE.map((item) => {
                    return (
                      <span key={item} className="tag-item"
                            onClick={() => this.goToPages(item)}>{messages(`menu.${item}`)}</span>
                    )
                  })}
                </div>)}
              </div>
            ) : (
              <div className="common-func-null">
                <p><img src={NullDataImg}/></p>
                <p>{messages('dashboard.key123')/*您还没有设置常用功能*/}</p>
                {!user.enableNewPermission && <p className='link'><a onClick={() => this.goToPages("personal-settings")}>{messages('dashboard.key124')/*去设置 >*/}</a></p>}
              </div>
            )}
        </div>
      </div>
    ) : <span/>;
  }
}

CommonFunc.propTypes = {
  menuRouterDeal: React.PropTypes.any,
};

CommonFunc.defaultProps = {};


function mapStateToProps(state) {
  return {
    tenantMode: state.main.tenantMode,
    user: state.login.user
  }
}

export default connect(mapStateToProps)(CommonFunc);

